site_8g/src/app/[locale]/(TabBar)/profile/ProfileHeader.tsx

"use client";
import { UserInfoRep, UserVipInfo, Wallet } from "@/api/user";
import TipsModal, { ModalProps } from "@/components/TipsModal";
import { Link, useRouter } from "@/i18n/routing";
import { useWalletStore } from "@/stores/useWalletStore";
import { WalletEnum } from "@/types";
import { vipImages } from "@/utils/constant";
import { flatPoint, percentage } from "@/utils/methods";
import { ProgressBar, Toast } from "antd-mobile";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { Fragment, useRef, useState } from "react";

type Props = {
    userInfo: UserInfoRep;
    userMoney: Wallet;
    userVip: UserVipInfo;
};
const VipCard = (props: { userVip: UserVipInfo }) => {
    const { userVip } = props;
    const t = useTranslations("ProfilePage");

    // Vip 图标
    const vipIconElement = vipImages.map((item, index) => {
        if (item.leve === userVip.vip_level) {
            return (
                <Fragment key={index}>
                    <Image src={item.src} alt={"vip"} height={110} width={100} />
                    <span className={"icon-level"} style={{ color: item.color }}>
                        {item.leve}
                    </span>
                </Fragment>
            );
        }
    });
    return (
        <div className={"vip-card"}>
            <div className={"vip-card__icon"}>{vipIconElement}</div>
            <div className={"vip-card-process"}>
                {/*<div className={"process-top"}>{userVip.vip_exp}xp</div>*/}
                <div>
                    <ProgressBar
                        percent={percentage(userVip.vip_exp, userVip.vip_score_exp)}
                        style={{
                            "--fill-color": "#fb8b05",
                            "--track-width": "0.0694rem",
                        }}
                    />
                </div>
                <div className={"process-bottom"}>
                    <span>VIP{userVip.vip_level}</span>
                    <span className={"process-bottom-desc"}>
                        {t("expTips", {
                            exp: flatPoint(userVip.vip_score_exp - userVip.vip_exp),
                        })}
                    </span>
                    <span>
                        VIP
                        {userVip.vip_next_level}
                    </span>
                </div>
            </div>
        </div>
    );
};
const Progress = (props: { percent: number }) => {
    const { percent } = props;
    return (
        <div className="flex">
            <ProgressBar
                percent={percent}
                className={"mr-[0.0694rem] flex-1"}
                style={{
                    "--fill-color": "var(--primary-color)",
                    "--track-width": "0.0694rem",
                }}
            />
            <span className={"text-primary-color"}>{percent}%</span>
        </div>
    );
};
const WalletContent = (props: {
    percentage: number;
    type: string;
    difference: number;
    current: number;
}) => {
    const { percentage, type, difference, current } = props;
    const t = useTranslations("ProfilePage");
    return (
        <div>
            <div className={"mb-[0.12rem] text-[0.12rem]"}>
                <span className={"mr-[10px]"}>{type}</span>
                <i className={"mr-[10px] indent-[10px] text-[0.1528rem] font-bold"}>R$</i>
                <span>{current}</span>
            </div>

            <Progress percent={percentage} />

            <div>
                <span>{t("modalBottomTips")}</span>
                <span>{difference.toFixed(2)}</span>
            </div>
        </div>
    );
};
// 现金
const BalanceContent = (props: { wallet: Wallet }) => {
    const { wallet } = props;
    const t = useTranslations("ProfilePage");
    return (
        <>
            <WalletContent
                difference={wallet.target_score_rollover - wallet.current_score_rollover}
                type={t("balance")}
                current={wallet.score || 0}
                percentage={percentage(wallet.current_score_rollover, wallet.target_score_rollover)}
            />
        </>
    );
};

const BonusContent = (props: { wallet: Wallet }) => {
    const { wallet } = props;
    const t = useTranslations("ProfilePage");
    return (
        <div>
            <WalletContent
                difference={wallet.target_point_rollover - wallet.current_point_rollover}
                type={t("bonus")}
                current={wallet.point || 0}
                percentage={percentage(wallet.current_point_rollover, wallet.target_point_rollover)}
            />
            <p className={"text-center"}>{t("bonusArticle")}</p>
            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
                <li>{t("bonusDesc1")}</li>
                <li>{t("bonusDesc2")}</li>
                <li>{t("bonusDesc3")}</li>
            </ul>
        </div>
    );
};

const FreeContent = (props: { wallet: Wallet }) => {
    const { wallet } = props;
    const t = useTranslations("ProfilePage");
    return (
        <div>
            <WalletContent
                difference={wallet.target_free_score_rollover - wallet.current_free_score_rollover}
                type={t("free")}
                current={wallet.free_score || 0}
                percentage={percentage(
                    wallet.current_free_score_rollover,
                    wallet.target_free_score_rollover
                )}
            />
            <p className={"text-center"}>{t("freeArticle")}</p>
            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
                <li>{t("freeDesc1")}</li>
                <li>{t("freeDesc2")}</li>
            </ul>
        </div>
    );
};
const ReplayContent = (props: { wallet: Wallet }) => {
    const { wallet } = props;
    const t = useTranslations("ProfilePage");
    return (
        <div>
            <WalletContent
                difference={wallet.target_lose_score_rollover - wallet.current_lose_score_rollover}
                type={t("replay")}
                current={wallet.lose_score || 0}
                percentage={percentage(
                    wallet.current_lose_score_rollover,
                    wallet.target_lose_score_rollover
                )}
            />
            <p className={"text-center"}>{t("replayArticle")}</p>
            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
                <li>{t("replayDesc1")}</li>
                <li>{t("replayDesc2")}</li>
            </ul>
        </div>
    );
};
const WalletCard = (props: { userMoney: Wallet }) => {
    const { userMoney } = props;
    const t = useTranslations("ProfilePage");

    const tipsRef = useRef<ModalProps>(null);
    const [tipsStatus, setTipsStatus] = useState<keyof typeof WalletEnum>("Bonus");

    const modalHandler = (key: keyof typeof WalletEnum) => {
        setTipsStatus(key);
        tipsRef.current?.onOpen();
    };

    return (
        <>
            <TipsModal
                ref={tipsRef}
                title={
                    <div className={"flex items-center"}>
                        <i
                            className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}
                        ></i>
                        {t("modalTitle")}
                    </div>
                }
            >
                {/*现金*/}
                {tipsStatus === WalletEnum.Balance ? <BalanceContent wallet={userMoney} /> : null}
                {/*  彩金*/}
                {tipsStatus === WalletEnum.Bonus ? <BonusContent wallet={userMoney} /> : null}
                {/* 免费币 */}
                {tipsStatus === WalletEnum.Free ? <FreeContent wallet={userMoney} /> : null}
                {/*  重玩币 */}
                {tipsStatus === WalletEnum.Replay ? <ReplayContent wallet={userMoney} /> : null}
            </TipsModal>
            <div className="coin">
                <span className="coin_left__icon iconfont icon-icon-wallet"></span>
                <div className={"coin_right_wallet"}>
                    <div
                        className={"wallet_left_border"}
                        onClick={() => modalHandler(WalletEnum.Balance)}
                    >
                        <div className={"wallet_header"}>
                            <span>{t("balance")}</span>
                            <Image
                                className="wallet_header__icon"
                                src="/img/a.png"
                                alt="question"
                                width={15}
                                height={15}
                            />
                        </div>

                        <div className="num">
                            <span className="uppercase">brl </span>
                            <span>{userMoney.score || 0.0}</span>
                        </div>
                    </div>
                    <div
                        className={"wallet_right_content"}
                        onClick={() => modalHandler(WalletEnum.Bonus)}
                    >
                        <div className={"wallet_header"}>
                            {t("bonus")}
                            <Image
                                className="wallet_header__icon"
                                src="/img/a.png"
                                alt="question"
                                width={15}
                                height={15}
                            />
                        </div>
                        <div className="num">
                            <span className="uppercase">brl </span>
                            <span>{userMoney.point || 0.0}</span>
                        </div>
                    </div>
                    <div
                        className={"wallet_left_border"}
                        onClick={() => modalHandler(WalletEnum.Free)}
                    >
                        <div className={"wallet_header"}>
                            {t("free")}
                            <Image
                                className="wallet_header__icon"
                                src="/img/a.png"
                                alt="question"
                                width={15}
                                height={15}
                            />
                        </div>
                        <div className="num">
                            <span className="uppercase">brl </span>
                            <span>{userMoney.free_score || 0.0}</span>
                        </div>
                    </div>
                    <div
                        className={"wallet_right_content"}
                        onClick={() => modalHandler(WalletEnum.Replay)}
                    >
                        <div className={"wallet_header"}>
                            {t("replay")}
                            <Image
                                className="wallet_header__icon"
                                src="/img/a.png"
                                alt="question"
                                width={15}
                                height={15}
                            />
                        </div>
                        <div className="num">
                            <span className="uppercase">brl </span>
                            <span>{userMoney.lose_score || 0.0}</span>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};
export const ProfileHeader = (props: Props) => {
    const { userInfo, userVip } = props;
    const t = useTranslations("ProfilePage");

    const wallet = useWalletStore((state) => state.wallet);
    const router = useRouter();

    const handler = () => {
        if (!!wallet.score) {
            router.push("/withdraw");
        } else {
            Toast.show("no money ");
        }
    };
    return (
        <>
            <div className={"userContent"}>
                <div className={"userInfo"}>
                    <div>
                        <div className={"bgImg"}>
                            <Image
                                src={"/img/avatar.png"}
                                className={"h-[100%] w-[100%]"}
                                alt={"avatar"}
                                width={120}
                                height={120}
                            />
                        </div>
                        <div>
                            <span>{t("Conta")}</span>
                            <span className="phone">{userInfo?.user_phone || ""}</span>
                        </div>
                    </div>

                    <Link className="goto iconfont icon-xiangzuo1" href={`/changePassword`}></Link>
                </div>
                {/*vipcard*/}
                <VipCard userVip={userVip} />

                <WalletCard userMoney={wallet} />
            </div>

            <div className="link">
                <Link href={"/deposit"} className={"btn"}>
                    {t("Depósito")}
                </Link>

                <p className={"btn"} onClick={handler}>
                    {t("Sacar")}
                </p>
            </div>
        </>
    );
};